<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>全部案例</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/picker.css"/>
<link rel="stylesheet" type="text/css" href="css/caseMod.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/picker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/caseMod.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<header class="header">
	<a class="left_icon back_btn"></a>
	<h4 class="title">推送</h4>
</header>

<div id="doumee">

	<div class="dm-mainNav flex-row bg-w bottom-line" id="pushNav">
		<a class="flex-full" onclick="pushTab(this)">案例</a>
		<a class="flex-full" onclick="pushTab(this)">商品</a>
		<a class="flex-full" onclick="pushTab(this)">活动</a>
		<a class="flex-full" onclick="pushTab(this)">优惠券</a>
		<a class="flex-full" onclick="pushTab(this)">软文</a>
	</div>

	<!--案例筛选项-->
	<div class="bottom-line flex-row h5" id="screenMod">
		<div class="nav-box flex-full">
			<a :class="type == 0 ? 'on' : ''" @click="caseTab(0)">厨柜</a>
			<a :class="type == 1 ? 'on' : ''" @click="caseTab(1)">全屋</a>
		</div>
		<dl class="sel left-line flex-row" @click="check">
			<dt class="dm-wrap">筛选</dt>
			<dd class="animate"></dd>
		</dl>
	</div>
	
	<!--商品排序-->
	<div class="bottom-line flex-row h5" id="goodMod">
		<dl class="flex-full flex-row" @click="screen($event,0)" data-check='0'>
			<dt class="dm-wrap">{{list==null?'全部分类':'三级分类'+list[2]}}</dt>
			<dd class="animate"></dd>
		</dl>
		<dl class="flex-full flex-row" @click="screen($event,1)">
			<dt class="dm-wrap">综合排序</dt>
		</dl>
		<dl class="flex-full flex-row" @click="screen($event,2)" data-check='0'>
			<dt class="dm-wrap">{{spec[0]}}</dt>
			<dd class="animate"></dd>
		</dl>
	</div>
	
	<!--优惠券筛选-->
	<div id="wealSpec" class="bg-w">
		<ul class="flex-inline bottom-line">
			<li class="on">全部</li>
			<li>满减</li>
			<li>无门槛</li>
			<li>定向商品券</li>
			<li>免运费</li>
		</ul>
	</div>
	
	<footer class="footer top-line main-line flex-row" id="bottomBtn">
		<button class="max-btn">推送</button>
		<!--<div class="txt tl flex-full" onclick="showAllSel()">已选择<span id="totalVal">0</span>个</div>
		<a class="btn">推送</a>-->
	</footer>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children">
					
					<!--案例-->
					<template v-if="pushType == 0">
						<ul class="case-box dm-mb" v-for="(item,index) in caseData">
							<li class="cover photo" data-rate='4/3'>
								<img :src="item.cover" />
								<input type="radio" class="checkBox" name="case" v-model="radioVal" :value="item.id" />
							</li>
							<li class="flex-row info">
								<h5 class="name dm-wrap flex-full">{{item.name}}</h5>
							</li>
						</ul>
					</template>
					
					<!--商品-->
					<template v-else-if="pushType == 1">
						<div class="proMod bg-w dm-clearfix" style="padding-top: 12px;">
							<dl class="dm-left" v-for="item in goodData">
								<dt class="pt cover" data-rate='1'>
									<img :src="item.path" />
									<input type="radio" class="checkBox" name="product" v-model="radioVal" :value="item.id" />
								</dt>
								<dd>
									<h5 class="name dm-wrap">{{item.name}}</h5>
									<div class="val">￥<span>{{item.val}}</span></div>
								</dd>
							</dl>
						</div>
					</template>
					
					<!--活动-->
					<template v-else-if="pushType == 2">
						<div class="active-wrap">
							<ul v-for="item in activeData">
								<li class="cover" data-rate='2'>
									<img :src="item.cover" />
									<input type="radio" class="checkBox" name="case" v-model="radioVal" :value="item.id" />
								</li>
								<li class="bg flex-row">
									<h5 class="name flex-full dm-wrap">{{item.name}}</h5>
								</li>
							</ul>
						</div>
					</template>
					
					<!--优惠券-->
					<template v-else-if="pushType == 3">
						<div class="wealMod homeMod" id="weal" style="padding-top: 14px;">
						
							<div class="weal-wrap">
								
								<ul class="weal-box" v-for="(item,index) in wealData" :type="0">
									<li class="main-info flex-row">
										<div class="val">
											<span class="unit">￥</span>{{item.val}}
										</div>
										<div class="flex-full info flex-row">
											<dl class="flex-full">
												<dt>{{item.type}}</dt>
												<dd>{{item.start}} ~ {{item.end}}</dd>
											</dl>
										</div>
										<input type="radio" class="checkBox" name="case"  v-model="radioVal" :value="item.id" />
									</li>
									<li class="ex-info flex-row" @click="controlRuler($event)">
										<div class="flex-full ruler animate dm-wrap">{{item.rule}}</div>
										<a class="btn animate"></a>
									</li>
								</ul>
								
							</div>
							
						</div>
					</template>
						
					<!--软文-->
					<template v-else>
						<div class="articleMod bg-w">
							<ul class="article bottom-line" v-for="(item,index) in articleData">
								<li class="bt h5">{{item.title}}</li>
								<li class="time h6">{{item.time}}</li>
								<input type="radio" class="checkBox" name="case"  v-model="radioVal" :value="item.id" />
							</ul>
						</div>
					</template>
					
				</div>
				
			</div>
		</div>
	</div>

	<!--筛选项-->
	<div class="subMain animate" id="screenMask">
		<footer class="footer top-line tc h4 main-line flex-row" id="allCaseBtn">
			<a class="reset flex-full" @click="resetOpt">重置</a>
			<a class="enter flex-full" @click="enterOpt">确定</a>
		</footer>
		<div class="swiper-container Main" id="caseAllSel">
			<div class="swiper-wrapper">
				<div class="swiper-slide content">
					
					<div class="children">
						<template v-for="(item,index) in arr">
							<h5 class="dm-title bottom-line">{{item.name}}</h5>
							<div class="list h5">
								<span :class="sel[index] == val ? 'on bottom-line' : 'bottom-line' " @click="checkOpt(index,val)" v-for="(sub,val) in item.list">{{sub}}</span>
							</div>
						</template>
					</div>
					
				</div>
			</div>
		</div>
		
	</div>

</div>

</body>
</html>
